<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { computed, reactive } from 'vue'
import { changeRoute, getHomeMenuList } from '../../../router'
import MenuItem from './MenuItem.vue'
import { appState } from '../../../common/manager/appManager'

const route = useRoute()
const state = reactive({
  menus: getHomeMenuList()
})

const sysConfig = computed(() => {
    return appState.config
})

const activeRoute = computed(() => {
  return route.path
})

const changeRouteHandler = (menu:any) => {
  changeRoute(menu.path)
}
</script>

<template>
  <div :class="['left-menu',appState.miniMenu?'left-menu-mini':'']">
    <div class="logo-box">
      <div class="logo-img">
        <img :src="'./logo.png'" />
      </div>
      <div v-if="!appState.miniMenu" class="sys-name">
        {{ sysConfig.alias }}
      </div>
    </div>
    <menu-item v-for="menu of state.menus"
               v-show="!menu.hidden"
               :mini="appState.miniMenu"
               :icon="menu.icon"
               :label="menu.label"
               :select="menu.path===activeRoute"
               @click="changeRouteHandler(menu)" />
  </div>
</template>

<style scoped lang="scss">
.left-menu{
  @include ver-group(start,start);
  flex:none;
  width: $w-left-size;
  height:100%;
  background: #212950;
  box-sizing: border-box;

  .logo-box{
    @include hor-group();
    flex:none;
    width:100%;
    height:60px;
    box-sizing: border-box;

    .logo-img{
      @include hor-group(center,center);
      flex:none;
      width:30px;
      height:30px;
      overflow: hidden;
      padding: 0 8px;
      &>img{
        flex:none;
        width:30px;
        height:30px;
      }
    }
  }

  .sys-name{
    flex:none;
    font-size:16px;
    color:#409eff;
    font-weight: bold;
  }
}

.left-menu-mini{
  width: 50px;
}

</style>
